<template>
  <div class="register-container">
    <div class="register-box">
      <div class="register-header">
        <div class="logo-wrapper">
          <i class="fa fa-user-plus register-icon"></i>
        </div>
        <h2>用户注册</h2>
        <p class="subtitle">创建您的账户</p>
      </div>
      
      <form @submit.prevent="handleRegister" class="register-form">
        <FormInput
          id="username"
          v-model="registerForm.username"
          label="用户名"
          icon="fa-user"
          type="text"
          placeholder="请输入用户名"
          :required="true"
        />
        
        <FormInput
          id="email"
          v-model="registerForm.email"
          label="邮箱"
          icon="fa-envelope"
          type="email"
          placeholder="请输入邮箱"
          :required="true"
        />
        
        <FormInput
          id="password"
          v-model="registerForm.password"
          label="密码"
          icon="fa-lock"
          type="password"
          placeholder="请输入密码"
          :required="true"
        />
        
        <FormInput
          id="confirmPassword"
          v-model="registerForm.confirmPassword"
          label="确认密码"
          icon="fa-lock"
          type="password"
          placeholder="请再次输入密码"
          :required="true"
        />
        
        <FormButton
          :loading="loading"
          loading-text="注册中..."
          button-class="register-button"
        >
          注册
        </FormButton>
        
        <div v-if="error" class="error-message">
          <i class="fa fa-exclamation-circle"></i>
          {{ error }}
        </div>
        
        <div v-if="success" class="success-message">
          <i class="fa fa-check-circle"></i>
          {{ success }}
        </div>
      </form>
      
      <div class="register-footer">
        <p class="login-prompt">已有账户？<router-link to="/login" class="login-link">立即登录</router-link></p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import FormInput from '../../components/FormInput.vue'
import FormButton from '../../components/FormButton.vue'

// 表单数据
const registerForm = reactive({
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
})

// 状态管理
const loading = ref(false)
const error = ref('')
const success = ref('')
const router = useRouter()

// 注册处理函数
const handleRegister = async () => {
  // 重置消息
  error.value = ''
  success.value = ''
  
  // 简单验证
  if (!registerForm.username || !registerForm.email || !registerForm.password || !registerForm.confirmPassword) {
    error.value = '请填写所有必填字段'
    return
  }
  
  if (registerForm.password !== registerForm.confirmPassword) {
    error.value = '两次输入的密码不一致'
    return
  }
  
  if (registerForm.password.length < 6) {
    error.value = '密码长度至少为6位'
    return
  }
  
  // 模拟注册过程
  loading.value = true
  
  try {
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 简单的模拟注册验证（实际项目中应该调用后端API）
    // 这里我们假设注册总是成功的
    success.value = '注册成功！即将跳转到登录页面...'
    
    // 3秒后跳转到登录页面
    setTimeout(() => {
      router.push('/login');
    }, 3000)
  } catch {
    error.value = '注册失败，请稍后重试'
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
/* 注册页面样式 */

.register-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 1rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.register-box {
  background: white;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 420px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}

.register-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.register-header {
  text-align: center;
  margin-bottom: 2rem;
}

.logo-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  margin-bottom: 1.5rem;
}

.register-icon {
  font-size: 2.5rem;
  color: white;
}

.register-header h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.5rem;
  letter-spacing: -0.025em;
}

.subtitle {
  color: #6b7280;
  font-size: 1rem;
  font-weight: 400;
}

.register-form {
  margin-bottom: 1.5rem;
}

.register-button {
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
  box-shadow: 0 4px 6px rgba(79, 70, 229, 0.1);
}

.register-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(79, 70, 229, 0.2);
}

.register-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.error-message {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #fef2f2;
  color: #ef4444;
  border-radius: 8px;
  font-size: 0.875rem;
  text-align: center;
  border: 1px solid #fecaca;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.success-message {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #dcfce7;
  color: #22c55e;
  border-radius: 8px;
  font-size: 0.875rem;
  text-align: center;
  border: 1px solid #bbf7d0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.register-footer {
  text-align: center;
  font-size: 0.875rem;
  color: #6b7280;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.login-prompt {
  margin: 0;
}

.login-link {
  color: #4f46e5;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.login-link:hover {
  color: #4338ca;
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .register-box {
    padding: 1.75rem;
  }

  .register-header h2 {
    font-size: 1.5rem;
  }
  
  .logo-wrapper {
    width: 70px;
    height: 70px;
  }
  
  .register-icon {
    font-size: 2rem;
  }
}

@media (max-width: 360px) {
  .register-box {
    padding: 1.5rem;
  }
}
</style>
